<template>
	<view class="item bgf mt20 ml30 mr30 r20 pl30 pr30 useAnimate" @click="$go('/pages/order/detail?id='+data.id)">
		<view class="t-flex between title">
			<view class="c3">订单号：{{data.order_sn}}</view>
			<view class="mainC">{{statusLabel[data.status]}}</view>
		</view>
		
		<view class="goods t-flex between pt20 pb20 mt10 mb10 click" >
			<uv-image :src="$str.img(data.good_image)" mode="aspectFill"
			width="200rpx"
			height="160rpx"
			radius="20rpx"
			></uv-image>
			<view class="right ml30">
				<view class="f32 c3 bold">
					{{data.good_name}}
				</view>
				<view class="f32 bold price">
					<text class="prc mr20">￥{{data.payamount}}</text> <text class="mprc" v-if="data.good_info">￥{{data.good_info?.marketprice}}</text>
				</view>				
			</view>
		</view>
		
		<view class="select t-flex between pt20 pb20 pl30 pr30 r10 mb20" @click.stop="$go('/pages/order/booking?id='+data.id)"
		v-if="data.status == 1"
		>
			<view class="c3">预约时间</view>
			<view class="right">
				{{model.lastBooking.length?data.lastBooking[0].yy_time:'请选择'}}
				<text class="iconfont icon-sanjiaoxia"></text>
			</view>
		</view>
		<view class="select t-flex between pt20 pb20 pl30 pr30 r10 mb20" v-if="data.sf_user_id">
			<view class="c3">陪练师傅</view>
			<view class="right">
				{{data.sf_nickname }}
			</view>
		</view>
		
		<view class="actions t-flex pb30 mt30">
			<view class="btn t-flex center s1" @click.stop="emit('actions',{type:1,data})"
			v-if="data.status == 0"
			>查看助力</view>
			<view class="btn t-flex center s1" @click.stop="emit('actions',{type:2,data})"
			v-if="data.status == 0"
			>取消订单</view>
			<view class="btn t-flex center s2" @click.stop="emit('actions',{type:3,data})"
			v-if="data.status == 0"
			>立即支付</view>
			<view class="btn t-flex center s2" @click.stop="emit('actions',{type:4,data})"
			v-if="data.status == 1"
			>核销码</view>
			<view class="btn t-flex center s2" @click.stop="emit('actions',{type:5,data})"
			v-if="data.status == 2"
			>去评价</view>
		</view>
		
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { getMarketPrice } from '../../lib/ts/util';
	
	const emit = defineEmits(['actions'])
	
	
	
	let props =  defineProps({
		data:{
			type:Object,
			default:{}
		}
	})
	
	
	let model = computed(()=>{
		let res = props.data
		res.marketList = getMarketPrice(res.orderdetail.map(item=> +item.price),+JSON.parse(res.shippingfee).xm_price,+res.good_info.marketprice)
		res.lastBooking = res.orderdetail.filter(item=> !item.is_hx && item.yy_time_id)
		return res
	})
	
	
	let statusLabel = ['待付款','待服务','待评价','支付取消','待服务取消','已评价']
	
	
</script>

<style scoped lang="scss">
	.title{
		padding: 30rpx 0;
		border-bottom: 2rpx solid #F5F5F5;;
	}
	.goods{
		.right{
			width: calc(100% - 230rpx);
		}
		.price{
			margin-top: 40rpx;
			.prc{
				color: #FF1616;
			}
			.mprc{
				color: #BBBBBB;
				text-decoration: line-through;
				font-weight: 400;
			}
		}
	}
	
	.actions{
		justify-content: flex-end;
		.btn{
			height: 68rpx;
			border-radius: 35rpx;
			padding: 0 38rpx;
			margin-left: 24rpx;
		}
		.s1{
			background: #FFFFFF;
			border: 2rpx solid #EEEEEE;
			color: #666;
		}
		.s2{
			background-color: $main-color;
			color: #fff;
		}
	}
	
	.select{
		background-color: #F5F6F7;
		.right{
			width: 70%;
			text-align: right;
			.iconfont{
				color: #999;
			}
		}
	}

</style>